<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div3">
        <a href="#">a1</a><br>
        <a href="#">a2</a><br>
        <a href="#">a3</a><br>
        <a href="#">a4</a><br>
    </div>
    <script>
        const div3 = document.querySelector('#div3');
        // div3.addEventListener('click', event => {
        //     // 阻止默认行为
        //     event.preventDefault();
        //     const target = event.target;
        //     if (target.nodeName === 'A') {
        //         alert(target.innerHTML);
        //     }
        // });

        // 通用事件绑定函数升级版
        // 既能支持普通元素监听，又能支持事件代理的监听
        function bindEvent(elem, type, selector, fn) {
            // 此处的selector为事件代理模式下触发元素的选择器，
            // 比如 上面代码if (target.nodeName === 'A') 的作用

            // 首先判断如果传三个参数的情况下
            if (fn == null) {
                fn = selector;
                selector = null;
            }
            elem.addEventListener(type, event => {
                const target = event.target;
                if (selector) {
                    // 代理绑定
                    if (target.matches(selector)) {
                        // matches 是用来判断一个 DOM 元素是否符合一个CSS选择器
                        // 比如下例，如果是 a 的话就走这里
                        fn.call(target, event);
                    }
                } else {
                    // 普通绑定
                    fn.call(target, event)
                }
            })
        }

        // 所以上例就可以改为
        bindEvent(div3, 'click', 'a', function (event) {
            event.preventDefault();
            alert(this.innerHTML);
        })
    </script>
</body>

</html>